<template>
  <div class="gggl-content">
    <!-- 数据资产概览 -->
    <div class="sjzcgl-content">
      <div class="time-select">
        <span
          class="btn"
          :class="{ active: currentTime == 1 }"
          @click="selectTime(1)"
          >近24小时</span
        >
        <span
          class="btn"
          :class="{ active: currentTime == 7 }"
          @click="selectTime(7)"
          >近7天</span
        >
        <span
          class="btn hasborder"
          :class="{ active: currentTime == 30 }"
          @click="selectTime(30)"
          >近30天</span
        >
      </div>
    </div>
    <div class="box-flex">
      <div class="left-box">
        <sjzl :allData="allData"></sjzl>
        <div style="width: 33%; margin-right: 15px">
          <sjlxfx style="width: 100%" :allData="allData"></sjlxfx>
          <sjqsfx
            style="width: 100%; margin-top: 20px"
            :allData="allData"
          ></sjqsfx>
        </div>
        <div style="width: 33%; margin-right: 15px">
          <ggaqqylx style="width: 100%" :optionData="qylxOptions"></ggaqqylx>
          <ggaqyhpafx
            style="width: 100%; margin-top: 20px"
            :optionData="yhpaOptions"
          ></ggaqyhpafx>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <dbqd></dbqd>
      <xcdb></xcdb>
      <yjsj></yjsj>
    </div>
  </div>
</template>
<script setup>
import { ScaleMin } from '@/utils/screen-scale-mixin.js';
const { scaleStyle } = ScaleMin();
import LabelTitle from '@/components/labeltitle.vue';
import { onMounted } from 'vue';
import sjzl from './component/ggaq-zhsj.vue';
import sjzldy from './component/sjzldy.vue';
import sjlxfx from './component/sjlxfx.vue';
import sjqsfx from './component/sjqsfx.vue';
import zxsj from './component/zxsj.vue';
import dbqd from './component/dbqd.vue';
import cygj from './component/cygj.vue';
import xcdb from './component/xcdb.vue';
import fwss from './component/gggl-fwss.vue';
import ggaqqylx from './component/ggaq-qylxfx.vue';
import ggaqyhpafx from './component/ggaq-yhpazg.vue';
import yjsj from './component/yjsj.vue';
import { useUserStore } from '@/pinia/user.js';
import { getzhsj, getsjlyqszfx, gethyhpcfx, getqylx } from '@/api/ggaq.js';
const piniaUser = useUserStore();

let currentTime = ref(7);
const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let allData = ref({});
let sjzlData = ref({});
let qylxOptions = ref({});
let yhpaOptions = ref({});
const getData = async () => {
  try {
    const [res1, res2, res3] = await Promise.all([
      getsjlyqszfx({ dimension: currentTime.value }),
      getqylx({ dimension: currentTime.value }),
      gethyhpcfx({ dimension: 'LastLastYear' }),
    ]);

    allData.value = res1.data;
    qylxOptions.value = res2.data;
    yhpaOptions.value = res3.data;
  } catch (e) {
    console.error('首页报错', e);
  }
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.time-select {
  position: absolute;
  right: 0;
  top: 0px;
  width: 210px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .btn {
    background: #fff;
    display: inline-block;
    width: 70px;
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #2263bf;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    &.active {
      background: #2263bf;
      color: #ffffff;
    }
    &.hasborder {
      border-left: 1px solid rgba(151, 151, 151, 0.21);
      border-right: 1px solid rgba(151, 151, 151, 0.21);
    }
  }
}
.gggl-content {
  width: 100%;
  // height: 100%;
  position: relative;
  border: 1px solid transparent;

  .sjzcgl-content {
    width: 100%;
    position: absolute;
    right: 0px;
    top: -10px;
  }
  .box-flex {
    margin-top: 20px;
    width: 100%;
    // height: calc(100% - 60px);
    // display: flex;
    // align-items: top;
    .left-box {
      width: 100%;
      display: flex;
      align-items: top;
      // flex-wrap: wrap;
    }
    // .right-box {
    //   width: 308px;
    //   height: 100%;
    //   margin-left: 20px;
    // }
  }
  .bottom-box {
    height: calc(100% - 320px);
    display: flex;
    align-items: top;
  }
}
</style>
